import React, { useState } from "react";
import ReactDOM from "react-dom";
import { RouterGuard } from "react-router-guard";
import config from "./config";
import "antd/dist/antd.css";

import "./styles.css";

import { Tag } from 'antd';

const { CheckableTag } = Tag;

const tagsData = ['Movies', 'Books', 'Music', 'Sports'];

function App() {
  // const [selectedTags, setSelectedTags] = useState(['Books'])
  // const handleChange = (tag, checked) => {
  //   // const nextSelectedTags = checked ? [...selectedTags, tag] : selectedTags.filter(t => t !== tag);
  //   // console.log('You are interested in: ', nextSelectedTags);
  //   setSelectedTags(checked ? [...selectedTags, tag] : selectedTags.filter(t => t !== tag));
  // }
  return (
    <div className="App">
      <RouterGuard config={config} />
      {/* <>
        <span style={{ marginRight: 8 }}>Categories:{Array.isArray(selectedTags)}</span>
        {tagsData.map(tag => (
          <CheckableTag
            key={tag}
            checked={Array.isArray(selectedTags) && selectedTags.indexOf(tag) > -1}
            onChange={checked => handleChange(tag, checked)}
          >
            {tag}
          </CheckableTag>
        ))}
      </> */}
    </div>
  );
}

const rootElement = document.getElementById("root"); // eslint-disable-line
ReactDOM.render(<App />, rootElement);
